<template>
  <div class="auto">
    <h3 class="bg-info text-center">收费界面</h3>
    <validator name='v'>
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-6 form-input-group">
            <label for="f_paytype" class=" col-sm-2 control-label">付款方式:</label>
            <div class="col-sm-3">
              <v-select id="f_payment"
                        v-model="f_payment"
                        placeholder='请选择'
                        :value.sync="model.f_payment"
                        :options='paytype'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
          <div class="col-sm-6 form-input-group">
            <label for="f_print" class="control-label">打印格式:</label>
            <div class="col-sm-3">
              <v-select id="print"
                        v-model="model.f_print"
                        placeholder='请选择'
                        :value.sync="model.f_print"
                        :options='printstyle'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6 form-input-group">
            <label for="f_pregas" class=" control-label col-sm-2">用气量:</label>
            <input class="form-control col-sm-4" type="number"
                   v-model="model.f_pregas" placeholder="用气量"
                   v-scale = "[model.f_pregas, 2]" disabled>
          </div>
          <div class="col-sm-6 form-input-group">
            <label for="f_preamount" class="control-label col-sm-2">用气金额:</label>
            <input class="form-control col-sm-4"  type="number" v-model="model.f_preamount"
                   v-scale = "[model.f_preamount, 2]"
                   placeholder="用气金额" disabled>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6 form-input-group">
            <label for="f_balance"  class="control-label col-sm-2">上期结余:</label>
            <input class="form-control col-sm-4"  type="number" v-model="model.f_balance"
                   v-scale="[model.f_balance,2]" placeholder="应收金额" disabled>
          </div>
          <div class="col-sm-6 form-input-group">
            <label for="f_curbalance" class="control-label col-sm-3">本期结余:</label>
            <input class="form-control col-sm-3"  type="number" v-model="curbalance"  placeholder="0"
                   v-scale = "[curbalance, 2]" disabled>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6 form-input-group">
            <label for="f_overdue" class="control-label col-sm-3">滞纳金:</label>
            <!-- <span class="col-sm-2 form-control-static">{{model.f_totalcost}}</span> -->
            <input class="form-control col-sm-3"  type="number" v-model="model.f_overdue" placeholder="滞纳金" disabled>
          </div>
          <div class="col-sm-6 form-input-group">
            <label for="f_totalcost" class=" col-sm-3 control-label">应收金额:</label>
            <input class="form-control col-sm-3"  type="number" v-model="model.f_totalcost" placeholder="应收金额" disabled>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-6 col-sm-6 form-input-group">
            <label for="f_collection" class="control-label">收款:</label>
            <input id="f_collection" class="form-control" type="number" v-model="model.f_collection"
                   v-validate:f_collection='{dctest: [ Math.trunc(model.f_totalcost), ">=" ] }'>  <!-- @keyup.enter="confirm()" -->
          </div>
          <span class="col-sm-12" v-if="$v.f_collection.dctest" style="color:red;text-align:right">收款不能小于应交金额</span>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-8 col-sm-4">
            <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid'>确认</button>
            <button class="btn btn-default">取消</button>
          </div>
        </div>
      </form>
      <print-bill :show="showPrint" :data='model' :bill-url='billUrl' @toggle="close" v-ref:printbill ></print-bill>
    </validator>
  </div>
</template>

<script>
  import AppData from '../../../stores/AppData'
  import * as Util from '../../Util'
  export default {
    title: '收费界面',
    data () {
      return {
        model: {},
        showPrint: false,
        billUrl: null
      }
    },
    props: ['data'],
    ready () {
      console.log('收款界面。。', this.data.f_collection)
      this.model = Object.assign({}, this.model, this.data)
    },
    watch: {
      'data' () {
        this.model = Object.assign({}, this.model, this.data)
      }
    },
    methods: {
      confirm () {
        console.log('按回车了。，。。。', this.data)
        let selling = {
          f_userinfo_id: this.model.f_userinfo_id,
          f_user_id: [],
          f_pregas: this.model.f_pregas,
          f_preamount: this.model.f_preamount,
          f_totalcost: this.model.f_totalcost,
          f_collection: this.model.f_collection,
          f_payment: this.model.f_payment[0],
          f_delaypay: this.model.f_overdue,
          f_bill_style: this.model.f_print[0],
          f_operator: Util.f.name,
          f_filiale: Util.f.f_fengongsi,
          f_outlets: Util.f.f_parentname,
          f_charge_type: '机表收费',
          isHand: '1',
          f_comments: '按户收费测试。，。',
          hand_ids: []
        }
        for (let i = 0; i < this.model.rows.length; i++) {
          selling.f_user_id.push(this.model.rows[i].f_user_id)
          selling.hand_ids.push(this.model.rows[i].handplan_id)
        }
        console.log('保存收费对象', selling)
        this.$resetpost('rs/logic/commonPay', {data: selling}, {resolveMsg: '恭喜你收费成功！！', rejectMsg: '收费出错!!!'}).then((res) => {
          // 收费成功，打票
          console.log('收费成功返回值：', res)
          this.model.id = res.data
          this.model.f_bill_type = '按户收费'
          this.model.f_bill_style = this.data.f_print[0]
          if (this.data.f_pregas > 0) {
            this.billUrl = 'rs/report/machine_bill'
          } else {
            this.billUrl = 'rs/report/pre_sell'
          }
          this.showPrint = true
          // this.$dispatch('research')
        }).catch((error) => {
          // 收费失败，
          console.log('收费失败', error)
          this.$dispatch('research')
        })
      },
      clean () {
        this.$dispatch('research')
      },
      close () {
        this.showPrint = false
        this.clean()
      }
    },
    computed: {
      'curbalance' () {
        let account = 0
        // 判断是否有滞纳金,第一笔没有滞纳金，说明所有欠费都没有滞纳金
        if (this.model.rows.length === 0 || this.model.rows.length > 0 && this.model.rows.overdue <= 0) {
          account = (this.model.f_collection - 0) + this.model.f_balance
        } else {
          account = (this.model.f_collection - 0) - this.model.f_totalcost
        }
        return account.toFixed(2)
      },
      paytype () {
        return AppData.getParam('付款方式')
      },
      printstyle () {
        return AppData.getParam('打印格式')
      }
    }
  }
</script>

<style scoped>

</style>
